import { PageContainer, ProFormText, ProFormTextArea, StepsForm } from '@ant-design/pro-components';
import type { FormInstance } from 'antd';
import { Card, Divider, Result } from 'antd';
import React, { useRef, useState } from 'react';
import useStyles from './style.style';

const StepResult: React.FC<{
  onFinish: () => Promise<void>;
  children?: React.ReactNode;
}> = (props) => {
  const { styles } = useStyles();
  return (
    <Result status="success" title="操作成功" className={styles.result}>
      {props.children}
    </Result>
  );
};
const StepForm: React.FC<Record<string, any>> = () => {
  const { styles } = useStyles();
  const [stepData, setStepData] = useState<any>({
    payAccount: 'ant-design@alipay.com',
    receiverAccount: 'test@example.com',
    receiverName: 'Alex',
    amount: '500',
    receiverMode: 'alipay',
  });
  const [current, setCurrent] = useState(0);
  const formRef = useRef<FormInstance>();
  return (
    <PageContainer content="分步骤完成租户创建。">
      <Card bordered={false}>
        <StepsForm
          current={current}
          onCurrentChange={setCurrent}
          submitter={{
            render: (props, dom) => {
              if (props.step === 2) {
                return null;
              }
              return dom;
            },
          }}
        >
          <StepsForm.StepForm<any>
            formRef={formRef}
            title="填写基础信息"
            initialValues={stepData}
            onFinish={async (values) => {
              setStepData(values);
              return true;
            }}
          >
            <ProFormText
              label="手机号"
              width="md"
              name="mobile"
              rules={[
                {
                  required: true,
                  message: '请输入手机号',
                },
              ]}
            />
          </StepsForm.StepForm>

          <StepsForm.StepForm title="高级信息">
            <div className={styles.result}>
              <ProFormTextArea
                label="备注"
                width="md"
                name="remark"
                required={false}
                rules={[
                  {
                    required: true,
                    message: ' 需要填写备注',
                  },
                ]}
              />
            </div>
          </StepsForm.StepForm>
          <StepsForm.StepForm title="完成">
            <StepResult
              onFinish={async () => {
                setCurrent(0);
                formRef.current?.resetFields();
              }}
            ></StepResult>
          </StepsForm.StepForm>
        </StepsForm>
        <Divider
          style={{
            margin: '40px 0 24px',
          }}
        />
      </Card>
    </PageContainer>
  );
};
export default StepForm;
